<script>
import Count from "@/views/salarys/components/Count.vue";

export default {
  name: 'salarys',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addCount() {
      // 父组件中修改数据
      this.count++
      // 因为子组件中用到了父组件传递过去的prop，父组件修改后立即获取子组件的prop数据(拿不到修改后的prop数据因为prop的更新是异步的)
      console.log('在父组件更新数据后立马获得子组件的prop', this.$refs.Count.count)
      this.$nextTick(() => {
        console.log('在父组件更新数据后使用$nextTick获得子组件的prop', this.$refs.Count.count)
      })
    }
  },
  components: {Count}
}
</script>

<template>
  <div class="salarys">
    <el-card class="box-card">
      <div slot="header">
        <span>prop的更新(数据修改)是异步的</span>
      </div>
      <el-button type="primary" @click="addCount">+1</el-button>
      <!--传递prop给子组件-->
      <Count :count="count" ref="Count"></Count>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.salarys {
  .el-card {
    margin-top: 10px;
  }

  .el-button {
    margin: 10px 0;
  }
}
</style>
